<template>
  <div class="scroll-wrap">
    <img src="../../static/img/tip.png" >
    <ul class="scroll-content" >
      <li v-if="this.prizeList==0">
        暂无公告
      </li>
      <li v-for="item in this.prizeList">
         <router-link :to='{name: "PublicNoticedetail",query:{unid: item.unid}}'>{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import {
    PublicNotice
  } from '../api/api';
  export default {
  data () {
    return {
      prizeList: [],
      activeIndex: 0,
        PageSize: 5,
        CurrentPage: 1,
    }
  },
 methods: {
    getData() {
        let CurrentPageNum = this.CurrentPage
        //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid    
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: this.CurrentPage,
          Query: {
            CriteriaList:[]
          }
        }
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        PublicNotice(options).then((res) => {
          if (res.success === true) {
             this.prizeList =res.data;
          }
        })
      }
 },
 mounted() {
        this.getData();
        setInterval(_ => {
            this.prizeList.push(this.prizeList[0])
            this.activeIndex += 1;
        }, 1000);
        setTimeout(_ => {
            setInterval(_ => {
                this.prizeList.splice(0,1)
                this.activeIndex =0;
            }, 1500);
        },1500);
      },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .scroll-wrap{
  width:100%;
  height:42px;
  line-height:42px;
  overflow: hidden;
  background:rgba(239, 239, 239, 0.71);
  img{
    width:16px;
    height:16px;
    float: left;
    margin:13px;
  }
}
.scroll-content{
  float:left;
  position: relative;
  transition: top 0.5s;
  margin: 0;
  padding: 0;
  li{
    margin-top:2px;
    height: 42px;
    text-align:left;
    color: #818181;
    font-size: .8rem;
    width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  }
}
</style>
